<template>
	<view>
		<!-- <view class="divider-box my-30">
			<u-divider color="#fa3534" border-color="#fa3534" fontSize="24">提交好评或建议，帮助骑手和商家做的更好</u-divider>
		</view> -->
		<u-notice-bar mode="horizontal" :list="list"></u-notice-bar>
		<view>

			<view class="content-1-box">
				<view class="font-32 flex items-center justify-between">
					<view class="font-bold">您对骑手满意吗？</view>
					<view class="font-24">已对骑手匿名</view>
				</view>
				<view class="mt-30 flex items-center">
					<u-avatar v-if="orderInfo.shopInfo" :src="$ut.setImgae(orderInfo.shopInfo.image)" size="60"
						mode="square"></u-avatar>
					<view class="ml-24">
						<view v-if="orderInfo.shopInfo">{{ orderInfo.shopInfo.name || '店铺名称' }}</view>
						<view class="font-24 mt-2" style="color: #999;transform: scale(.9) translateX(-8rpx);">
							{{orderInfo.reachTime || '配送时间内'}}左右送达
						</view>
					</view>
				</view>
				<view class="flex items-center justify-between mt-30">
					<view class="satisfied-box ml-32 flex items-center" :class="{ active : isSatisfied == 0 }"
						@tap="isSatisfied = 0">
						<u-image v-if="isSatisfied == 0" src="/static/icon/unsatisfied_active.png" width="50" mode="widthFix" />
						<u-image v-if="isSatisfied == undefined || isSatisfied == 1" src="/static/icon/unsatisfied.png" width="50"
							mode="widthFix" />
						<text class="ml-24 font-24">不满意</text>
					</view>
					<view class="satisfied-box ml-32 flex items-center" :class="{ active : isSatisfied == 1 }"
						@tap="isSatisfied = 1">
						<u-image v-if="isSatisfied == 1" src="/static/icon/satisfied_active.png" width="50" mode="widthFix" />
						<u-image v-if="isSatisfied == undefined || isSatisfied == 0" src="/static/icon/satisfied.png" width="50"
							mode="widthFix" />
						<text class="ml-24 font-24">满意</text>
					</view>
				</view>
				<view v-if="isSatisfied != undefined" class="mt-24">
					<view class="mt-30 mb-30">
						<text class="mr-22">速度: </text>
						<u-rate :count="5" active-color="#f0ad4e" v-model="speedRating" active-icon="thumb-up-fill"></u-rate>
					</view>
					<u-input v-model="valueInput1" type="textarea" :border="false" placeholder="您的反馈会督促我们做得更好" />
				</view>
			</view>
			<view class="content-1-box">
				<view class="font-32 flex items-center justify-between">
					<view class="font-bold">您对商家/菜品满意吗？</view>
					<u-checkbox-group shape="circle">
						<u-checkbox v-model="isAnonymous" active-color="#f0ad4e" size="24"><text
								class="font-24">匿名提交</text></u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="mt-30 flex items-center">
					<u-avatar v-if="orderInfo.shopInfo" :src="$ut.setImgae(orderInfo.shopInfo.image)" size="60"
						mode="square"></u-avatar>
					<view class="ml-24">
						<view v-if="orderInfo.shopInfo">{{ orderInfo.shopInfo.name || '店铺名称' }}</view>
					</view>
				</view>
				<!-- <view class="mt-30">
					<text class="mr-12">总体: </text>
					<u-rate :count="5" active-color="#f0ad4e" v-model="allRating" active-icon="thumb-up-fill"></u-rate>
					<text class="font-24 ml-12">{{ allRating | setRateText }}</text>
				</view> -->
				<view class="mt-30">
					<text class="mr-22">质量: </text>
					<u-rate :count="5" active-color="#f0ad4e" v-model="qualityRating" active-icon="thumb-up-fill"></u-rate>
				</view>
				<view class="mt-30 font-24" style="opacity: .7;">
					<text class="mr-22">态度: </text>
					<u-rate :count="5" active-color="#f0ad4e" v-model="serviceRating" active-icon="thumb-up-fill"></u-rate>
					<template v-if="allRating != 0 || qualityRating != 0 || serviceRating != 0">
						<view>
							<u-tag v-for="item in evaluateTemplateData" :key="item" class="mr-16 mt-24" :text="item" mode="dark"
								bg-color="#eeeeee" color="#666" @click="addEvaluateTemplate(item)"
								:class="{'is-current' : evaluateTemplate.some(items => items == item)}" />
						</view>
						<view class="mt-24 textarea_box">
							<u-input v-model="content" type="textarea" :border="false" placeholder="告诉商家,激励我们做得更好" />
							<u-upload :action="action" :max-count="1" :header="header" :file-list="fileList" @on-remove="onRemove"
								@on-success="onSuccess"></u-upload>
						</view>
					</template>
				</view>
			</view>
		</view>
		<view class="mx-32 py-60">
			<u-button type="warning" :custom-style="customStyle" @click="submit()">提交评论</u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		baseUrl
	} from '@/common/request/baseurl.js';
	export default {
		data() {
			return {
				list: ['提交好评或建议，帮助骑手和商家做的更好'],
				customStyle: {
					backgroundColor: '#f0ad4e'
				},
				action: baseUrl + '/comFileDetail/uploadPublicFile',
				header: {
					publictoken: uni.getStorageSync('clinetToken')
				},
				orderInfo: {}, // 订单信息
				fileList: [],
				evaluateTemplateData: [], // 评价模板
				evaluateTemplate: [], // 评价模板结果
				isAnonymous: false,
				isSatisfied: null,
				src: '',
				allRating: 0, // 总体评价
				qualityRating: 0, // 质量评价
				serviceRating: 0, // 态度评价
				speedRating: 0, // 速度评价
				valueInput1: '',
				content: '', // 文字评价
				image: '',
				orderId: null
			}
		},
		filters: {
			// 商品评价过滤器
			setRateText(val) {
				let text = '';
				switch (val) {
					case 1:
						text = '非常差';
						break;
					case 2:
						text = '差';
						break;
					case 3:
						text = '一般';
						break;
					case 4:
						text = '满意';
						break;
					case 5:
						text = '非常满意';
						break;
					default:
						text = '';
						break;
				}
				return text;
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad(e) {
			this.orderId = e.id;
			this.getOrderTakeawayToUser(e.id);
			this.getVariable();
		},
		methods: {
			// 提交数据
			submit() {
				const data = {
					orderTakeawayId: this.orderId,
					deliveryAllRating: this.isSatisfied == null ? null : this.isSatisfied == 0 ? 4.5 : 5,
					serviceRating: this.serviceRating,
					qualityRating: this.qualityRating,
					speedRating: this.speedRating,
					content: this.content,
					image: this.image,
					userId: this.userInfo.id,
					isAnonymous: this.isAnonymous == true ? 1 : 0,
					evaluateTemplate: this.evaluateTemplate.join(',')
				}
				this.$u.api.addShopCommodityEvaluate(data).then(res=>{
					uni.showToast({
						title: '评价成功',
						success() {
							self.$ut.route('/pages/order/order',{},'tab');
						}
					})
				})
			},
			// 添加评价模板信息
			addEvaluateTemplate(item) {
				// 查找数组是否存在改值
				const indexs = this.evaluateTemplate.findIndex((items) => items == item);
				if (indexs == -1) {
					// 不存在就添加
					this.evaluateTemplate.push(item);
				} else {
					// 存在就删除
					this.evaluateTemplate.splice(this.evaluateTemplate.indexOf(item), 1)
				}
			},
			// 上传图片
			onSuccess(data, index, lists, name) {
				this.image = data.data.id;
			},
			// 删除图片
			onRemove(data) {
				this.image = ''
			},
			async getOrderTakeawayToUser(id) {
				const data = await this.$u.api.getOrderTakeawayToUser({
					id
				});
				if (data.dataList.length !== 0) this.orderInfo = data.dataList[0];
			},
			// 获取系统参数
			async getVariable() {
				const data = await this.$u.api.getVariable({
					systemTitle: 'evaluateTemplate'
				});
				this.evaluateTemplateData = data.dataList[0].systemValues.split(';');
				console.log(this.evaluateTemplateData, 'evaluateTemplate');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-1-box {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin: 30rpx;

		.line {
			border-bottom: 1rpx solid #eaeaea;
			opacity: .3;
		}
	}

	.textarea_box {
		background-color: #f8f8f8;
	}

	.satisfied-box {
		background-color: #f8f8f8;
		padding: 8rpx 60rpx;
		border-radius: 16rpx;
	}

	.active {
		background-color: $uni-color-warning;
		color: #fff;
	}

	.is-current {
		background-color: $uni-color-warning !important;
		color: #ff007f !important;
	}

	::v-deep {
		.u-input__textarea {
			background-color: #f8f8f8;
			padding-left: 12rpx;
			padding-right: 12rpx;
			border-radius: 8rpx;
		}

		.uni-textarea-placeholder {
			color: #999 !important;
		}

		.u-star-wrap {
			margin-right: 12rpx;
		}
	}

	page {
		background: #f8f8f8;
	}

	.divider-box {
		margin: 0 120rpx;
	}
</style>